<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <my-bread-crumb>粉丝列表</my-bread-crumb>
    </div>
    <div>
    <!-- 1标签页 -->
    <el-tabs v-model="activeName" type="card">
      <!-- 1-1粉丝列表 -->
      <el-tab-pane label="粉丝列表" name="first">
        <!-- 列表 -->
        <div class="fans_list">
          <div class="fans_item" v-for="(val,ind) in fansData" :key="ind">
            <el-avatar :size="80" src="val.photo"></el-avatar>
            <p>{{val.name}}</p>
            <el-button type="primary" plain size="small">+关注</el-button>
          </div>
        </div>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="this.total"
          @current-change="pageFn"
          :current-page="page">
        </el-pagination>
      </el-tab-pane>
      <!-- 1-2画像echart-->
      <el-tab-pane label="画像" name="second">
        <div id="fansECharts"></div>
      </el-tab-pane>
    </el-tabs>
    </div>
  </el-card>
</template>

<script>
var echarts = require('echarts')
export default {
  name: 'fans',
  data: function () {
    return {
      activeName: 'first',
      page: 1,
      total: 0,
      fansData: []
    }
  },
  mounted () {
    this.fansFn()
    this.fansStats()
  },
  methods: {
    async fansFn () {
      await this.$axios.get('/mp/v1_0/followers', {
        params: {
          page: this.page,
          per_page: 21
        }
      }).then(res => {
        this.total = res.data.data.total_count
        this.fansData = res.data.data.results
      }).catch(err => {
        console.log(err)
      })
    },
    pageFn (num) {
      this.page = num
      this.fansFn()
    },
    async fansStats () {
      const res = await this.$axios.get('/mp/v1_0/statistics/followers')
      console.log(res)
      try {
        const obj = res.data.data.age
        const xData = Object.keys(obj).map(item => item.replace('le', '小于').replace('gt', '大于'))
        const yData = Object.values(obj)
        this.eChartsFn(xData, yData)
      } catch (err) {
        console.log(err)
      }
    },
    async eChartsFn (xData, yData) {
      var myChart = echarts.init(document.getElementById('fansECharts'))
      const option = {
        legend: {
          data: ['粉丝数']
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [{
          name: '粉丝数',
          type: 'line',
          data: yData
        }]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
.el-tab-pane /deep/ #fansECharts {
  width: 600px;
  height:400px;
}
</style>
